<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2种创建组件方式</title>
</head>
<body>

  <div id="example1"></div>
  <div id="example2"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
  
      // 第一种定义组件的方式 ------使用工厂函数
      function MyComponent() {
        console.log(this);   // 工厂函数中的this 禁止指向window   则为undefined
        return (
          <div>
            <h1>我是工厂函数创建的组件 (一些简单组件用这种方式创建)</h1>
            <Haha/>  
          </div>
        )
      }
      // 组件的嵌套的实现
      function Haha() {
        return <h3>哈哈</h3>
      }
   
    /*
    * 备注说明：我们常说的【组件对象】，实质上指的是：组件的实例对象。
    * */
    
    //2.渲染组件标签
    /*如下代码：当渲染组件标签的时候，会触发react底层自动调用定义组件的工厂函数  将返回值渲染
    经过babel的编译，开启了严格模式，禁止工厂函数里的this指向window*/
    
    /*如果渲染标签时，首字母是小写的，尝试寻找html 与之对应的标签进行渲染，如果未找到 则报错
    如果渲染标签时，首字母是大写的，尝试寻找组件是否定义
    */
    /*
    下面这行代码做了这些事情: 1.寻找MyComponent 是否定义
    2.若定义了 调用组件标签同名的工厂函数 返回值渲染
    */
    ReactDOM.render(<MyComponent/>,document.getElementById('example1'))
    
    //第二种定义组件的方式------ES6类组件
    class Mycomponent2 extends React.Component {
      // constructor(a) {
      //   super(a)
      // }
      // 重写从父类继承的render
      render() {
        // 类组件中的render 方法里的this 是在组件类的实例对象---（简称组件对象）
        console.log(this);
        return <h1>我是ES6类组件 (一些复杂组件用这种方式创建)</h1>
      }
    }

    /*
    下面这行代码: 1.创建了一个Mycomponent2 实例. 2.通过该实例调用到了render, 从而获取了返回值
    当渲染组件标签的时候，会触发react底层创建一个组件类的实例对象 MyComponent2，随后
      使用该实例对象调用了，其身上的render方法
    */
    ReactDOM.render(<Mycomponent2/>,document.getElementById('example2'))


  </script>
</body>
</html>
